<div class="row" class="replication-row">
  <div>
    <div class="row flex-items-xs-between rightPos">
      <div class="flex-xs-middle option-right">
        <hbr-filter id="filter-rules" [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}'
          [currentValue]="search.ruleName"></hbr-filter>
        <span class="refresh-btn" (click)="refreshRules()">
          <clr-icon shape="refresh"></clr-icon>
        </span>
      </div>
    </div>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <hbr-list-replication-rule #listReplicationRule [projectId]="projectId" (replicateManual)=replicateManualRule($event)
      (selectOne)="selectOneRule($event)" (hideJobs)="hideJobs()" (openNewRule)="openModal()" (editOne)="openEditRule($event)"
      (reload)="reloadRules($event)" [loading]="loading" [withReplicationJob]="withReplicationJob" (redirect)="customRedirect($event)"
      [hasCreateReplicationPermission]="hasCreateReplicationPermission"
      [hasUpdateReplicationPermission]="hasUpdateReplicationPermission"
      [hasDeleteReplicationPermission]="hasDeleteReplicationPermission"
      [hasExecuteReplicationPermission]="hasExecuteReplicationPermission"
      ></hbr-list-replication-rule>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 jobList" [hidden]='hiddenJobList'>
    <div *ngIf="withReplicationJob" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="row flex-items-xs-between jobsRow">
        <h5 class="flex-items-xs-bottom option-left-down">{{'REPLICATION.REPLICATION_EXECUTIONS' | translate}}</h5>
        <div class="row flex-items-xs-between flex-items-xs-bottom fiter-task">
          <div class="execution-select">
            <div class="select filter-tag" [hidden]="!isOpenFilterTag">
              <clr-select-container>
                  <select clrSelect (change)="doFilterJob($event)" >
                      <option value="trigger">{{'REPLICATION.REPLICATION_TRIGGER' |translate}}</option>
                      <option value="status">{{'REPLICATION.STATUS' | translate}}</option>
                  </select>
              </clr-select-container>
            </div>
            <hbr-filter id="filter-executions" [withDivider]="true" (openFlag)="openFilter($event)"
              filterPlaceholder='{{"REPLICATION.FILTER_EXECUTIONS_PLACEHOLDER" | translate}}'
              (filterEvt)="doSearchExecutions($event)" [currentValue]="currentTerm"></hbr-filter>
            <span class="refresh-btn">
              <clr-icon shape="refresh"  (click)="refreshJobs()"></clr-icon>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="withReplicationJob" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <clr-datagrid [(clrDgSelected)]="selectedRow" [clrDgLoading]="jobsLoading" (clrDgRefresh)="clrLoadJobs($event)">
        <clr-dg-action-bar>
          <div class="btn-group">
            <button type="button" class="btn  btn-secondary" *ngIf="isSystemAdmin" [disabled]="!(jobs && jobs.length>0) || isStopOnGoing || !selectedRow.length"
              (click)="openStopExecutionsDialog(selectedRow)">{{'REPLICATION.STOPJOB' | translate}}</button>
          </div>
        </clr-dg-action-bar>
        <clr-dg-column [clrDgSortBy]="'id'">{{'REPLICATION.ID' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'status'">{{'REPLICATION.STATUS' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'trigger'">{{'REPLICATION.REPLICATION_TRIGGER' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgSortBy]="creationTimeComparator">{{'REPLICATION.CREATION_TIME' | translate}}</clr-dg-column>
        <clr-dg-column>{{'REPLICATION.DURATION' | translate}}</clr-dg-column>
        <clr-dg-column>{{'REPLICATION.SUCCESS_RATE' | translate}}</clr-dg-column>
        <clr-dg-column>{{'REPLICATION.TOTAL' | translate}}</clr-dg-column>
        <clr-dg-placeholder>{{'REPLICATION.JOB_PLACEHOLDER' | translate }}</clr-dg-placeholder>
        <clr-dg-row *ngFor="let j of jobs" [clrDgItem]="j">
          <clr-dg-cell>
              <a href="javascript:void(0)" (click)="goToLink(j.id)">{{j.id}}</a>
          </clr-dg-cell>
          <clr-dg-cell>
            {{getStatusStr(j.status)}}
            <clr-tooltip>
                <clr-icon *ngIf="j.status_text" clrTooltipTrigger shape="info-circle" size="20"></clr-icon>
                <clr-tooltip-content [clrPosition]="'left'" clrSize="md" *clrIfOpen>
                    <span>{{j.status_text}}</span>
                </clr-tooltip-content>
            </clr-tooltip>
          </clr-dg-cell>
          <clr-dg-cell>{{j.trigger}}</clr-dg-cell>
          <clr-dg-cell>{{j.start_time | date: 'short'}}</clr-dg-cell>
          <clr-dg-cell>{{getDuration(j)}}</clr-dg-cell>
          <clr-dg-cell>
            {{(j.status === 'InProgress'? (j.total > 0 ? j.succeed / j.total : 0): j.total > 0 ? j.succeed / j.total : 1)| percent }}
          </clr-dg-cell>
          <clr-dg-cell>{{j.total}}</clr-dg-cell>
        </clr-dg-row>
        <clr-dg-footer>
          <span *ngIf="showPaginationIndex">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPLICATION.OF' | translate}}</span>
          {{pagination.totalItems}} {{'REPLICATION.ITEMS' | translate}}
          <clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgPageSize]="pageSize" [clrDgTotalItems]="totalCount"></clr-dg-pagination>
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </div>
  <hbr-create-edit-rule *ngIf="isSystemAdmin" [withAdmiral]="withAdmiral"
    (goToRegistry)="goRegistry()" (reload)="reloadRules($event)"></hbr-create-edit-rule>
  <confirmation-dialog #replicationConfirmDialog (confirmAction)="confirmReplication($event)"></confirmation-dialog>
  <confirmation-dialog #StopConfirmDialog (confirmAction)="confirmStop($event)"></confirmation-dialog>
</div>
